<template>
  <div class="container">
    <!--  顶部 start-->
    <div class="top">
      <div class="title">用户中心</div>
      <div class="info">
        <div class="user">
          <van-image class="userImg" round width="3.5rem" height="3.5rem" :src="dataStore.userImg"/>
          <div class="nickname">{{ dataStore.nickname }}</div>
        </div>
        <div class="icon-list">
          <el-icon class="icon" @click="router.push('/work/index')">
            <Grid/>
          </el-icon>
          <el-icon class="icon" @click="router.push('/user/desc')">
            <Tools/>
          </el-icon>
        </div>
      </div>
    </div>
    <!--  顶部 end-->
    <!--  我的收藏和足迹 start-->
    <view class="my">
      <view class="my-item">
        <el-icon class="icon">
          <StarFilled/>
        </el-icon>
        <view class="text">我的收藏</view>
        <view class="number">0</view>
      </view>
      <view class="center"></view>
      <view class="my-item">
        <el-icon class="icon">
          <Promotion/>
        </el-icon>
        <view class="text">我的足迹</view>
        <view class="number">0</view>
      </view>
    </view>
    <!--  我的收藏和足迹 end-->
    <!--  宫格 start-->
    <GridList :list="gridList"/>
    <!--  宫格 end-->
    <!--  cell列表 start-->
    <van-cell-group>
      <van-cell title="个人中心" is-link to="/user/desc"/>
    </van-cell-group>
    <!--  cell列表 end-->
  </div>
</template>
<script setup>
import {useRouter} from 'vue-router'
import {useDataStore} from "@/stores/dataStore"
import {reactive} from "vue";
import GridList from "@/components/List/GridList/Index.vue"
const dataStore = useDataStore()

const router = useRouter()
//宫格列表
const gridList = reactive([
  {
    icon: '',
    name: '患者登记',
    url: '/patient/add'
  },
  {
    icon: '',
    name: '患者管理',
    url: '/patient/index'
  },
  {
    icon: '',
    name: '风险筛查',
    url: '/assessment/riskAssessment'
  },
  {
    icon: '',
    name: '制定计划',
    url: '/plan/index'
  },
  // {
  //   icon: '',
  //   name: '',
  //   url: ''
  // },
])
</script>
<style scoped lang="scss">
.container {
  background-color: #ffffff;
}

.top {
  background-color: #3ddadd;
  border-radius: 0 0 40% 40%;
  padding: 20px;

  .title {
    text-align: center;
    font-weight: bolder;
    font-size: 17px;
  }

  .info {
    display: flex;

    .user {
      display: flex;
      width: 400px;

      .userImg {
      }

      .nickname {
        font-size: 20px;
        color: #ffffff;
        margin: 20px;
      }
    }

    .icon-list {
      margin-top: 10px;
      display: flex;

      .icon {
        font-size: 20px;
        color: #fcf6f6;
        margin: 5px;
      }
    }
  }
}

.my {
  display: flex;
  padding: 10px;

  .my-item {
    display: flex;
    padding-left: 30px;
    width: 50%;

    .icon {
      font-size: 17px;
      opacity: .8;
    }

    .text {
      opacity: .6;
      margin-left: 10px;
      margin-right: 10px;
      font-size: 17px;
    }

    .number {
      margin-top: 3px;
      font-size: 17px;
    }
  }

  .center {
    opacity: .6;
    height: 20px;
    border-left: 1px solid #a89f9f;
  }
}
</style>
